<template>
    <div v-if="props.isArr">
        <div v-show="props.content.length > 0">
            <el-popover placement="top-start" :width="200" trigger="hover">
                <template #reference>
                    <div class="text_over">
                        <div v-for="(item, index) in props.content" :key="index">{{ item.name || item }}</div>
                    </div>
                </template>
                <div>
                    <span v-for="(item, index) in props.content" :key="index">
                        {{ item.name || item }}
                        <span v-show="props.content.length - 1 !== index">、</span>
                    </span>
                </div>
            </el-popover>
        </div>
        <div v-show="props.content == 0">--</div>
    </div>
    <div v-else>
        <el-popover placement="top-start" :width="200" trigger="hover" :content="props.content">
            <template #reference>
                <div class="text_over">{{ props.content || '--' }}</div>
            </template>
        </el-popover>
    </div>
</template>
<script setup lang="tsx">
import { ElPopover } from 'element-plus';

const props = defineProps(['content', 'isArr']);
</script>
<style lang="scss" scoped>
.text_over {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>
